
<div class="row profile">

  <div class="col-12">

    <mat-card>
      <mat-card-content>

        <form>
          <div class="row equal-height">

            <div class="col-12">
              <h3 class="fw-bold">Profile details</h3>
            </div>

            <div class="col-lg col-sm-6 col-12 mb-sm-0 mb-3">

              <mat-form-field class="w-100 standalone-field">
                <span
                  matPrefix
                  matTooltip="Full name"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>person</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  placeholder="Full name"
                  type="text"
                  spellcheck="false"
                  name="name"
                  [(ngModel)]="user.name"
                  [ngModelOptions]="{standalone: true}">
              </mat-form-field>

            </div>

            <div class="col-lg col-sm-6 col-12">

              <mat-form-field class="w-100 standalone-field">
                <span
                  matPrefix
                  matTooltip="Username"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>person</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  placeholder="Username"
                  type="text"
                  [ngModel]="user.username"
                  [ngModelOptions]="{standalone: true}"
                  disabled>
              </mat-form-field>

            </div>

            <div class="col-lg col-sm-6 col-12 mt-lg-0 mt-3">

              <mat-form-field class="w-100 standalone-field">
                <span
                  matPrefix
                  matTooltip="Email address"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>mail</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  placeholder="Email address"
                  type="email"
                  [ngModel]="user.email"
                  [ngModelOptions]="{standalone: true}"
                  disabled>
              </mat-form-field>

            </div>

            <div class="col-lg-2 col-sm-6 col-12 d-flex align-items-stretch mt-lg-0 mt-3">

              <button
                mat-flat-button
                color="primary"
                class="w-100"
                (click)="save()"
                type="submit">
                Save
              </button>

            </div>

          </div>
        </form>

      </mat-card-content>
    </mat-card>

  </div>

  <div class="col-12 mt-4">

    <mat-card>
      <mat-card-content>

        <form>
          <div class="row equal-height">

            <div class="col-12">
              <h3 class="fw-bold">Change password</h3>
            </div>

            <div class="col-lg col-sm-6 col-12 mb-sm-0 mb-3">

              <mat-form-field class="w-100 standalone-field">
                <span
                  matPrefix
                  matTooltip="New password"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>password</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  placeholder="Password"
                  spellcheck="false"
                  [type]="showPassword ? 'text':'password'"
                  name="password"
                  autocomplete="new-password"
                  [(ngModel)]="password"
                  [ngModelOptions]="{standalone: true}"
                  [pattern]="CommonRegEx.password">
                <mat-error>{{CommonErrorMessages.password}}</mat-error>
                <button
                  matSuffix
                  mat-icon-button
                  type="button"
                  tabIndex="-1"
                  (click)="showPassword = !showPassword">
                  <mat-icon>{{showPassword ? 'visibility_off':'visibility'}}</mat-icon>
                </button>
              </mat-form-field>

            </div>

            <div class="col-lg col-sm-6 col-12">

              <mat-form-field class="w-100 standalone-field">
                <span
                  matPrefix
                  matTooltip="Repeat new password"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>password</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  placeholder="Confirm password"
                  spellcheck="false"
                  [type]="showPassword ? 'text':'password'"
                  [(ngModel)]="confirmPassword"
                  [ngModelOptions]="{standalone: true}"
                  #confirm>
                <mat-hint
                  class="text-danger"
                  *ngIf="confirm.value !== password">
                </mat-hint>
              </mat-form-field>
            </div>

            <div class="col-lg col-sm-6 col-12 mt-lg-0 mt-3"></div>

            <div class="col-xl-2 col-lg-3 col-sm-6 col-12 d-flex align-items-stretch mt-lg-0 mt-3">

              <button
                mat-flat-button
                color="primary"
                [disabled]="!password || password !== confirmPassword"
                class="w-100"
                (click)="savePassword()"
                type="submit">Change password
              </button>

            </div>

          </div>
        </form>

      </mat-card-content>
    </mat-card>

  </div>

  <div class="col-12 mt-4">

    <mat-card>
      <mat-card-content>

        <div class="row equal-height">
          <div class="col-12">
            <h3 class="fw-bold">Theme</h3>
          </div>
          <div class="col-lg col-sm-6 col-12 mb-sm-0 mb-3">

            <mat-form-field class="w-100 standalone-field">
              <span
                matPrefix
                matTooltip="Active theme"
                class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                <mat-icon>remove_red_eye</mat-icon>
                <span class="text-muted">|</span>
              </span>
              <mat-select
                placeholder="Theme"
                [(ngModel)]="themeService.theme">
                <mat-option
                  *ngFor="let item of themeService.themes"
                  [value]="item">{{item}}</mat-option>
              </mat-select>
            </mat-form-field>

          </div>
          <div class="col-lg col-sm-6 col-12 mb-sm-0 mb-3">

            <mat-form-field class="w-100 standalone-field">
              <span
                matPrefix
                matTooltip="Code theme"
                class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                <mat-icon>remove_red_eye</mat-icon>
                <span class="text-muted">|</span>
              </span>
              <mat-select
                placeholder="Code theme"
                [(ngModel)]="themeService.codeTheme">
                <mat-option
                  *ngFor="let item of themeService.codeThemes"
                  [value]="item">{{item}}</mat-option>
              </mat-select>
            </mat-form-field>

          </div>
          <div class="col-lg col-sm-6 col-12 mt-lg-0 mt-3"></div>
          <div class="col-xl-2 col-lg-3 col-sm-6 col-12 mt-lg-0 mt-3"></div>
        </div>

      </mat-card-content>
    </mat-card>

  </div>
</div>
